<template>
	<ComTemplate title="" :showq="true" showDetails @checkHandle="checkHandle" @getDetails="getDetails">
    <div  style="width:100%;height:400px;" v-if="qiehuan">
          				<Vchart
					:options="options"
					@chart-click="handleChartClick"
					@selectchanged="selectchanged"
				/>
    </div>
      <pageContant  v-else :total="10" :queryParams="queryParams" :content-table-config="tableConfig" :tableData="objs" page-name="goods"></pageContant>
  </ComTemplate>

</template>

<script lang="ts" setup>
import { ref, defineProps, computed, reactive, watch, onMounted,watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import pageContant from '../page-contant/src/page-contant.vue'
import ComTemplate from '@/components/ComTemplate'
import Vchart from '@/components/echarts/index.vue'
import { useStatisDeviceByUserObject } from './hooks/index'
const { options, handleChartClick, selectchanged, init, objs } = useStatisDeviceByUserObject()
let qiehuan =ref(true)
const tableConfig =ref({
  propList: [
  { prop: 'name', label: '横坐标市/县', minWidth: '80',show:true },
  { prop: 'enrollmentRate', label: '入组率', minWidth: '80',slotName: '%',show:true },
  { prop: 'numberAdmissions', label: '入院人数', minWidth: '80', slotName: '万人',show:true },
  { prop: 'participants', label: '入组人数', minWidth: '80', slotName: '万人',show:true }
],
showIndexColumn: true,
showSelectColumn: true,
  title: '',
  height:'400px'
})
let tableData:any = reactive([])
  let queryParams = ref({
pageNum: 1,
pageSize:10
})
let props =defineProps({
  form:{
  type:Object,
  required:true,
    default:()=>{
    }
  }
})
let $router =useRouter()
function getDetails() {
  $router.push({name:'Citymessage'})
}
// watch(props,
//   (val)=>{

//     init(val.form)
//   })
//   onMounted(() => {
//     init(props.form)
//   })
watchEffect(() => {
  init(props.form)
})
function checkHandle() {
  if(qiehuan.value ==true){
  qiehuan.value=false
}else if (qiehuan.value == false) {
  qiehuan.value=true
}
}
</script>
<style lang="scss" scoped></style>
